import React from 'react';
import Taro from '@tarojs/taro';

import { connect } from 'react-redux';
import * as T from './types';
import actions from './actions';
import { store2Props } from './selectors';

import { Text, View, Image, ScrollView } from '@tarojs/components';
import './index.less';
import moment from 'dayjs';
import qIcon from './components/img/q.png';
import sIcon from './components/img/s.png';
import btn from './components/img/btn.png';
import addIcon from './components/img/add.png';

actions().actions.loadReducer();

// @ts-ignore
@connect<Partial<T.IProps>, any>(store2Props, actions)
export default class PickupExpressDeliveryD extends React.Component<Partial<T.IProps>, any> {
  // 使用state值
  constructor(props) {
    super(props);
    this.state = {
      refresherTriggered: false,
    };
  }

  componentDidShow() {
    Taro.removeStorageSync('Select delivery address');
    //分页查询发布的配送订单
    this.props.actions.action.findEscorttradeList();
  }

  componentWillUnmount() {
    this.props.actions.clean();
  }

  _onScrollToLower = () => {
    let {
      main: { pageNum, totalPages },
      actions: { action },
    } = this.props;
    let num = pageNum + 1;
    if (num > totalPages) return;
    this.props.actions.action.commonChange('main.pageNum', num);
    this.props.actions.action.findEscorttradeList();
  };

  _onRefresherRefresh = () => {
    const { refresherTriggered } = this.state;
    if (refresherTriggered) return;
    this.setState({
      refresherTriggered: true,
    });
    this.props.actions.action.commonChange('main.pageNum', 0);
    this.props.actions.action.findEscorttradeList();
    setTimeout(() => {
      this.setState({
        refresherTriggered: false,
      });
    }, 2000);
  };

  render() {
    let { refresherTriggered } = this.state;
    if (!this.props.main) return null;
    let {
      main: { isLoading, orderList, pageNum, totalPages },
      actions: { action },
    } = this.props;

    return (
      <View className="pagePickupExpressDeliveryD">
        <ScrollView
          className="scroll"
          scrollY
          onScrollToLower={this._onScrollToLower}
          refresherEnabled
          refresherTriggered={refresherTriggered}
          onRefresherPulling={this._onRefresherRefresh}
        >
          {orderList && orderList.length > 0 ? (
            <View>
              {orderList.map((item, index) => {
                return (
                  <View className="card-box" key={index}>
                    <View
                      onClick={(e) => {
                        e.stopPropagation();
                        Taro.navigateTo({
                          url: '/pages/package-D/proxyDetails/index?id=' + item.id,
                        });
                      }}
                    >
                      <View className="time-price-box">
                        <Text className="time">
                          {moment(item.deliveryDate).format('YYYY-MM-DD') == moment(new Date()).format('YYYY-MM-DD')
                            ? '今天'
                            : moment(item.deliveryDate).format('MM-DD')}
                          ｜{moment(item.deliveryDate + ' ' + item.deliveryTimeBegin).format('HH:mm')}-{moment(moment(item.deliveryDate).format('YYYY-MM-DD') + ' ' + item.deliveryTimeEnd).format('HH:mm')}
                          <Text> 送达</Text>
                        </Text>
                        <View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
                          {/* <Text style={{fontSize: 14, color: '#FE3831', fontWeight: 'bold'}}>¥</Text>
                          <Text className="price">{item.price}</Text> */}
                          <Text className="price">{item.points}</Text>
                          <Text style={{ fontSize: 14, color: '#FE3831', fontWeight: 'bold', marginLeft: '10rpx' }}>积分</Text>
                        </View>
                      </View>
                      <View style={{ margin: '19px 0' }}>
                        <View className="needle-box">
                          <View style={{ alignItems: 'center' }}>
                            <Image className="q-icon" src={qIcon} mode="widthFix" />
                            <View className="dashed-border" />
                          </View>
                          <View style={{ marginLeft: 7 }}>
                            <View style={{ display: '-webkit-box' }} className="line-two">
                              <Text className="addr">
                                {item.communityName}｜{item.courierStationName}
                              </Text>
                            </View>
                            <View style={{ display: '-webkit-box' }} className="line-one">
                              <Text className="addr-info">{item.communityAddress}</Text>
                            </View>
                          </View>
                        </View>
                        {/* <Text className="distance">4.3km</Text> */}
                        <View className="needle-box">
                          <View style={{ alignItems: 'center' }}>
                            <View className="dashed-border" />
                            <Image className="s-icon" src={sIcon} mode="widthFix" />
                          </View>
                          <View style={{ marginLeft: 7, marginTop: 50 }}>
                            <View style={{ display: '-webkit-box' }} className="line-two">
                              <Text className="addr">
                                {item.city}
                                {item.area}
                                {item?.street}
                                {item.deliveryAddress}
                              </Text>
                            </View>
                          </View>
                        </View>
                      </View>

                      <View className="details">
                        <Text className="details-text">{item.requirement}</Text>
                      </View>
                    </View>
                    <View style={{ alignItems: 'center' }}>
                      <Image
                        className="btn-icon"
                        src={btn}
                        mode="widthFix"
                        onClick={(e) => {
                          e.stopPropagation();
                          Taro.showModal({
                            content: '确认接单吗?',
                            success: function (res) {
                              if (res.confirm) {
                                action.escortsnatchorderAdd(item.id);
                              } else if (res.cancel) {
                                console.log('用户点击取消');
                              }
                            },
                            confirmColor: '#218CFF'
                          });
                        }}
                      />
                    </View>
                  </View>
                );
              })}
              {orderList.length != 0 && orderList.length > 3 && pageNum != totalPages && (
                <View className="status">加载中</View>
              )}
              {orderList.length != 0 && pageNum == totalPages && <View className="status">没有更多了</View>}
            </View>
          ) : (
            <View className="not-orders-list">
              <Image src={require('./img/none.png')} className="current-none-img" mode="widthFix" />
              <Text className="current-none-text">暂未查询到邻里帮送信息哦～</Text>
            </View>
          )}
        </ScrollView>

        <Image
          onClick={() => {
            Taro.navigateTo({
              url: '/pages/package-D/addPickupCourier/index',
            });
          }}
          className="add-icon"
          src={addIcon}
          mode="widthFix"
        />
      </View>
    );
  }
}
